<template>
  <div class="policy-page w">
        <el-card class="box-card" shadow="hover">
          <template #header>
            <el-page-header @back="router.back()">
              <template #title>
                <el-text size="large" tag="b">Policies</el-text>
              </template>
              <template #content>
                <el-text size="large" type="primary" tag="b">Terms of Use</el-text>
              </template>
            </el-page-header>
          </template>
          
          <div class="policy-content">
            <div class="section-content">
              <el-result
                icon="warning"
                title="Important Notice"
                sub-title="Please read these terms carefully before using our services"
              />
            </div>

            <h2>1. Acceptance of Terms</h2>
            <div class="section-content">
              <el-card shadow="never" class="terms-card">
                <template #header>
                  <h3>Welcome to our Toy & Drone Shop</h3>
                </template>
                <p class="terms-text">
                  By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement.
                </p>
              </el-card>
            </div>

            <h2>2. Use License</h2>
            <div class="section-content">
              <el-alert
                type="info"
                :closable="false"
                show-icon
              >
                <template #title>
                  <strong>Limited License Grant</strong>
                </template>
                <template #description>
                  <p class="terms-text">
                    Permission is granted to temporarily download one copy of the materials (information or software) on Toy & Drone Shop's website for personal, non-commercial transitory viewing only.
                  </p>
                </template>
              </el-alert>

              <el-descriptions class="mt-4" :column="1" border>
                <el-descriptions-item label="Permitted Use">
                  Personal, non-commercial viewing
                </el-descriptions-item>
                <el-descriptions-item label="Restrictions">
                  No modification, copying, or redistribution
                </el-descriptions-item>
                <el-descriptions-item label="Duration">
                  Temporary access only
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <h2>3. Disclaimer</h2>
            <div class="section-content">
              <el-card shadow="never" class="terms-card warning-card">
                <template #header>
                  <div class="warning-header">
                    <el-icon><Warning /></el-icon>
                    <h3>Important Disclaimer</h3>
                  </div>
                </template>
                <p class="terms-text">
                  The materials on Toy & Drone Shop's website are provided on an 'as is' basis. Toy & Drone Shop makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.
                </p>
              </el-card>
            </div>

            <el-divider>Additional Information</el-divider>

            <div class="info-section">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-statistic title="Last Updated" :value="new Date('2024-01-01').getTime()">
                    <template #prefix>
                      <el-icon><Calendar /></el-icon>
                    </template>
                  </el-statistic>
                </el-col>
                <el-col :span="12">
                  <el-button type="primary" @click="router.push('/contact')" class="contact-button">
                    <el-icon><Message /></el-icon>
                    Contact Us
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Calendar, Message, Warning } from '@element-plus/icons-vue'

const router = useRouter()
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-content {
  padding: 20px 0;
}

.section-content {
  margin: 20px 0 40px;
}

h2 {
  color: var(--el-text-color-primary);
  margin-top: 30px;
}

h3 {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.terms-text {
  line-height: 1.8;
  margin: 10px 0;
  color: var(--el-text-color-regular);
}

.terms-card {
  border: 1px solid var(--el-border-color-light);
}

.warning-card {
  background-color: var(--el-color-warning-light);
}

.warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warning-header .el-icon {
  color: var(--el-color-warning);
}

.mt-4 {
  margin-top: 16px;
}

.info-section {
  text-align: center;
  margin-top: 40px;
}

.contact-button {
  width: 100%;
  margin-top: 20px;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}
</style> 